import React, { useState, useEffect } from "react";
import { Search, Swiper, Image, Skeleton } from "react-vant";
import axios from "axios";
import { useNavigate } from "react-router-dom";
import LazyloadImg from "../../components/lazyLoadImg";
import { useAppSelector } from "../../store";
const images = [
  "https://img.yzcdn.cn/vant/apple-1.jpg",
  "https://img.yzcdn.cn/vant/apple-2.jpg",
  "https://img.yzcdn.cn/vant/apple-3.jpg",
  "https://img.yzcdn.cn/vant/apple-4.jpg",
  "https://img.yzcdn.cn/vant/apple-5.jpg",
  "https://img.yzcdn.cn/vant/apple-6.jpg",
  "https://img.yzcdn.cn/vant/apple-7.jpg",
  "https://img.yzcdn.cn/vant/apple-8.jpg",
];

export interface ListItemType {
  id: string;
  url: string;
  title: string;
  desc: string;
  price: number;
}

const Index: React.FC = () => {
  const [list, setList] = useState<ListItemType[]>([]);
  const userBrowHistory = useAppSelector(state => state.user.userBrowhistory)
  const navigate = useNavigate();
  useEffect(() => {
    axios.get("/api/list").then((resp) => {
      setList(resp.data.data);
    });
  }, []);
  return (
    <div>
      <Search
        placeholder="请输入搜索关键词"
        onFocus={() => navigate("/search")}
      />
      <Swiper>
        {images.map((image) => (
          <Swiper.Item key={image}>
            <Image lazyload src={image} height={200} fit={"cover"} />
          </Swiper.Item>
        ))}
      </Swiper>
      <div className="list">
        {list.map((v) => {
          return (
            <dl
              key={v.id}
              onClick={() => navigate("/detail/" + v.id)}
              // 高亮： 筛选用户浏览记录
              className={ userBrowHistory.includes(v.id) ? 'active': '' }
            >
              <dt>
                <LazyloadImg src={v.url} width={120} height={100}></LazyloadImg>
              </dt>
              <dd>
                <h3>{v.title}</h3>
                <p>{v.desc}</p>
              </dd>
            </dl>
          );
        })}
      </div>
    </div>
  );
};

export default Index;
